iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 2
0
自我挑戰組

CSS 大全(第四版)閱讀筆記系列 第 2

Day2【主題一:Flexbox】_彈性容器(flex container)

  • 分享至 

  • xImage
  •  

2-1. flex-direction屬性

  • flex-direction控制彈性項目排列的主要軸向,就是彈性項目的排列方向。
.flex-container {
   flex-direction: row | row-reverse | column | column-reverse;
 }

2-2. 其他書寫方向

  • 預設或設定為row會用與文字方向相同的方向放置彈性項目
  • 注意flex-direction與書寫模是屬性(writing-mode、direction、text-orientation)的交互作用

writing-mode

  • writing-mode原本設計的是控制內聯元素的顯示的(即所謂的文本佈局-Text Layout)
  • writing-mode將頁面默認的水平流改成了垂直流,顛覆了很多我們以往的認知,基於原本水平方向才適用的規則全部都可以在垂直方向適用!
  • 如果元素是默認的水平流,則垂直margin會重疊;如果元素是垂直流,則水平margin會重疊。
  • 可以使用margin:auto實現垂直居中
  • (img元素在IE下不行,其他block元素可以)
  • 可以使用text-align:center實現圖片垂直居中
  • 可以實現全兼容的icon fonts圖標的旋轉效果
  • 截取自:改變CSS世界縱橫規則的writing-mode屬性

direction

  • direction: ltr; // 默認值 ,表示left-to-right內聯內容是從左往右依次排布的
  • direction: rtl; //right-to-left縮寫,表示內聯內容是從右往左依次排布的
  • 需要注意的是,當direction屬性的值是rtl的時候,我們的文字的前後順序不變(因為改變的只是内联元素块的左右順序)
  • CSS direction可以讓我們不改變DOM前後順序的情況下,調換元素的前後順序
  • 截取自:CSS direction屬性簡介與實際應用

2-3. 彈性行折行

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
  • 預設情況下彈性項目不會折行
  • flex-wrap屬性控制了彈性容器是否限制為只允許易行的彈性項目,或是能在必要時拓充為多行。
  • 當設定為|wrap-reverse時,相交軸的方向會相反。

2-4. 定義彈性流動

flex-flow: flex-direction || flex-wrap
  • flex-flow屬性能定義主軸與相交軸的方向,以及彈性項目是否能在需要時折行。
  • flex-flow屬性視同時設定flex-direction與flex-wrap屬性的縮寫屬性,能夠定義彈性容器的折行與主軸、相交軸。
    2-4-1. 認識軸向
  • 彈性項目是沿著主軸放置,彈性線則是沿著相交軸方向增加。
  • 項目實際位置取決於彈性方向(flex-direction)、彈性折行(flex-wrapping)、以及書寫模式的組合。

2-5. flex-wrap

  • 彈性項目無法縮小到比邊框、內距與邊界範圍的總和還小。

上一篇
Day1【主題一:Flexbox】_Flexbox基礎
下一篇
Day3【主題一:Flexbox】_排列彈性項目/彈性內容/調整內容
系列文
CSS 大全(第四版)閱讀筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
CSScoke
iT邦新手 3 級 ‧ 2019-09-10 00:04:59

提醒錯字

「銷教軸」的方向會相反。
flex-flow屬性能定義主軸與「香蕉軸」的方向
相交軸

我要留言

立即登入留言